<template>
<a-card :bordered="false">

    <!-- 操作按钮区域 -->
    <div class="table-operator">
        <a-button type="link" @click="myHandleAdd" icon="plus">新增</a-button>
        <a-button type="link" icon="download" @click="handleExportXls('仓库')">导出</a-button>
        <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
            <a-button type="link" icon="import">导入</a-button>
        </a-upload>
    </div>

    <!-- table区域-begin -->
    <div>
        <a-table ref="table" size="middle" rowKey="id" bordered class="j-table-force-nowrap" :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" :expandedRowKeys="expandedRowKeys" @change="handleTableChange" @expand="handleExpand" v-bind="tableProps">

            <a slot="code" @click="myHandleDetail(record)" slot-scope="text, record">{{text}}</a>

            <span slot="action" slot-scope="text, record">
                <a @click="myHandleEdit(record)">编辑</a>
                <a-divider type="vertical" />
                <a-dropdown>
                    <a class="ant-dropdown-link">更多
                        <a-icon type="down" /></a>
                    <a-menu slot="overlay">
                        <a-menu-item>
                            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                                <a>删除</a>
                            </a-popconfirm>
                        </a-menu-item>
                    </a-menu>
                </a-dropdown>
            </span>

        </a-table>
    </div>

    <basWarehouse-modal ref="modalForm" @ok="modalFormOk"></basWarehouse-modal>
</a-card>
</template>

<script>
import {
    getAction
} from '@/api/manage'
import {
    JeecgListMixin
} from '@/mixins/JeecgListMixin'
import BasWarehouseModal from './modules/BasWarehouseModal'
export default {
    name: "BasWarehouseList",
    mixins: [JeecgListMixin],
    components: {
        BasWarehouseModal
    },
    data() {
        return {
            description: '仓库管理',
            // 表头
            columns: [{
                    title: '名称',
                    fixed: true,
                    width: 200,
                    align: "center",
                    dataIndex: 'name'
                },
                {
                    title: '编码',
                    fixed: true,
                    width: 200,
                    align: "center",
                    dataIndex: 'code',
                    scopedSlots: {
                        customRender: 'code'
                    }
                },
                {
                    title: '电话',
                    align: "center",
                    dataIndex: 'phone'
                },
                {
                    title: '是否启用',
                    width: 75,
                    align: "center",
                    dataIndex: 'isEnabled_dictText'
                },
                {
                    title: '备注',
                    align: "center",
                    dataIndex: 'remark'
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    width: 150,
                    align: "center",
                    scopedSlots: {
                        customRender: 'action'
                    },
                }
            ],
            url: {
                list: "/bas/basWarehouse/rootList",
                childList: "/bas/basWarehouse/childList",
                delete: "/bas/basWarehouse/delete",
                deleteBatch: "/bas/basWarehouse/deleteBatch",
                exportXlsUrl: "/bas/basWarehouse/exportXls",
                importExcelUrl: "bas/basWarehouse/importExcel",
            },
            expandedRowKeys: [],
            hasChildrenField: "hasChild",
            pidField: "pid",
            dictOptions: {}
        }
    },
    computed: {
        importExcelUrl() {
            return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
        },
        tableProps() {
            let _this = this
            return {
                // 列表项是否可选择
                rowSelection: {
                    columnWidth: 40,
                    selectedRowKeys: _this.selectedRowKeys,
                    onChange: (selectedRowKeys) => _this.selectedRowKeys = selectedRowKeys
                }
            }
        }
    },
    methods: {
        initDictConfig() {},

        myHandleAdd() {
            this.$refs.modalForm.action = "add";
            this.handleAdd();
        },
        myHandleEdit(record) {
            this.$refs.modalForm.action = "edit";
            this.handleEdit(record);
        },
        myHandleDetail(record) {
            this.$refs.modalForm.action = "detail";
            this.handleDetail(record);
        },

        loadData(arg) {
            if (arg == 1) {
                this.ipagination.current = 1
            }
            this.loading = true
            this.expandedRowKeys = []
            let params = this.getQueryParams()
            return new Promise((resolve) => {
                getAction(this.url.list, params).then(res => {
                    if (res.success) {
                        let result = res.result
                        if (Number(result.total) > 0) {
                            this.ipagination.total = Number(result.total)
                            this.dataSource = this.getDataByResult(res.result.records)
                            resolve()
                        } else {
                            this.ipagination.total = 0
                            this.dataSource = []
                        }
                    } else {
                        this.$message.warning(res.message)
                    }
                    this.loading = false
                })
            })
        },
        getDataByResult(result) {
            return result.map(item => {
                //判断是否标记了带有子节点
                if (item[this.hasChildrenField] == '1') {
                    let loadChild = {
                        id: item.id + '_loadChild',
                        name: 'loading...',
                        isLoading: true
                    }
                    item.children = [loadChild]
                }
                return item
            })
        },
        handleExpand(expanded, record) {
            // 判断是否是展开状态
            if (expanded) {
                this.expandedRowKeys.push(record.id)
                if (record.children.length > 0 && record.children[0].isLoading === true) {
                    let params = this.getQueryParams(); //查询条件
                    params[this.pidField] = record.id
                    getAction(this.url.childList, params).then((res) => {
                        if (res.success) {
                            if (res.result && res.result.length > 0) {
                                record.children = this.getDataByResult(res.result)
                                this.dataSource = [...this.dataSource]
                            } else {
                                record.children = ''
                                record.hasChildrenField = '0'
                            }
                        } else {
                            this.$message.warning(res.message)
                        }
                    })
                }
            } else {
                let keyIndex = this.expandedRowKeys.indexOf(record.id)
                if (keyIndex >= 0) {
                    this.expandedRowKeys.splice(keyIndex, 1);
                }
            }
        },

        modalFormOk(formData, arr) {
            if (!formData.id) {
                this.addOk(formData, arr)
            } else {
                if (!arr) {
                    this.loadData()
                } else {
                    this.editOk(formData, this.dataSource)
                    this.dataSource = [...this.dataSource]
                }
            }
        },
        editOk(formData, arr) {
            if (arr && arr.length > 0) {
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i].id == formData.id) {
                        arr[i] = formData
                        break
                    } else {
                        this.editOk(formData, arr[i].children)
                    }
                }
            }
        },
        async addOk(formData, arr) {
            if (!formData[this.pidField]) {
                this.loadData()
            } else {
                this.expandedRowKeys = []
                for (let i of arr) {
                    await this.expandTreeNode(i)
                }
            }
        },
        expandTreeNode(nodeId) {
            return new Promise((resolve, reject) => {
                this.getFormDataById(nodeId, this.dataSource)
                let row = this.parentFormData
                this.expandedRowKeys.push(nodeId)
                let params = this.getQueryParams(); //查询条件
                params[this.pidField] = nodeId
                getAction(this.url.childList, params).then((res) => {
                    if (res.success) {
                        if (res.result && res.result.length > 0) {
                            row.children = this.getDataByResult(res.result)
                            this.dataSource = [...this.dataSource]
                            resolve()
                        } else {
                            reject()
                        }
                    } else {
                        reject()
                    }
                })
            })
        },
        getFormDataById(id, arr) {
            if (arr && arr.length > 0) {
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i].id == id) {
                        this.parentFormData = arr[i]
                    } else {
                        this.getFormDataById(id, arr[i].children)
                    }
                }
            }
        },

    }
}
</script>

<style scoped>
@import '~@assets/less/common.less';
</style>
